<template>
    <div ref="swiper" class="swiper-container" id="mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in list" :key="item.id">
                <img :src="item.imgUrl" />
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</template>

<script>
    import Swiper from 'swiper/swiper-bundle.min.js';
    import 'swiper/swiper-bundle.min.css'
    export default {
        name: 'Carousel',
        props:{
            list:Array,
            autoplay:{
                type:Boolean,
                default:false
            }
        },
        watch: {
            list: {
                handler() {
                    //nextTick(cb),动态数据发生变化,页面渲染成功后, nextTick的回调函数才会执行
                    this.$nextTick(() => {
                        new Swiper(this.$refs.swiper, {
                            loop: true, // 循环模式选项
                            autoplay: this.autoplay,
                            // 如果需要分页器
                            pagination: {
                                el: '.swiper-pagination',
                            },
                            // 如果需要前进后退按钮
                            navigation: {
                                nextEl: '.swiper-button-next',
                                prevEl: '.swiper-button-prev',
                            }
                        })
                    })
                },
                deep: true,
                immediate: true
            }
        },
    }
</script>
<style scoped>
</style>